<template>
  <el-form-item :label="label" :prop="prop" :label-width="labelWidth" :required="required" :rules="rules" :error="error" :show-message="showMessage" :inline-message="inlineMessage"	:size="size" >
    <el-input v-model="model" :placeholder="placeholder" :disabled="disabled" :type="type" :maxlength="maxlength" :minlength="minlength" :show-word-limit="showWordLimit" :clearable="clearable" @blur="blur" @focus="focus" @change="change" @input="input" @clear="clear" style="width: 100%" :autocomplete="autocomplete" :prefix-icon="prefixIcon" :suffix-icon="suffixIcon" :rows="rows" :autosize="autosize" :autofocus="autofocus"></el-input>
  </el-form-item>
</template>

<script>
export default {
  props: {
    value:{
      type:String,
      default:null
    },
    /**
     * el-form-item属性
     */
    label:{
      type:String,
      default:null,
      description:'名字'
    },
    prop:{
      type:String,
      default:null
    },
    labelWidth:{
      type:[Number,String],
      default:null
    },
    rules:{
      type:Object,
      default:null
    },
    error:{
      type:String,
      default:null,
      description:'显示的错误信息'
    },
    showMessage:{
      type:Boolean,
      default:false,
      description:'是否显示校验错误信息'
    },
    required:{
      type:Boolean,
      default:false
    },

    inlineMessage:{
      type:Boolean,
      default:true,
      description:'是否以行内形式展示校验信息'
    },
    size:{
      type:String,
      default:'medium',
      description:'输入框尺寸，只在 type!="textarea" 时有效, 可选值：large, small, mini'
    },
    /**
     * el-form-item属性end
     */
    disabled:{
      type:Boolean,
      default:false,
      description:'是否禁用'
    },

    type:{
      type:String,
      default:null,
      description:'类型,text，textarea 和其他 原生 input 的 type 值, 可选值：text, textarea, password, search, number, etc,'
    },
    placeholder:{
      type:String,
      default:'请输入'
    },
    maxlength:{
      type:Number,
      default:null
    },
    minlength:{
      type:Number,
      default:null,
      description:'最小长度'
    },
    showWordLimit:{
      type:Boolean,
      default:false,
      description:'是否显示输入字数统计，只在 type="text" 或 type="textarea" 时有效'
    },
    clearable:{
      type:Boolean,
      default:true,
      description:'是否可清空'
    },
    autocomplete:{
      type:String,
      default:'off',
      description:'原生属性，自动补全, 可选值：off, on, name, email, tel, url, password, new-password, current-password, one-time-code'
    },
    prefixIcon:{
      type:String,
      default:null,
      description:'输入框头部图标'
    },
    suffixIcon:{
      type:String,
      default:null,
      description:'输入框尾部图标'
    },
    rows:{
      type:Number,
      default:2,
      description:'输入框行数，只对 type="textarea" 有效'
    },
    autosize:{
      type:Object,
      default:null,
      description:'自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }'
    },
    autofocus:{
      type:Boolean,
      default:false,
      description:'是否自动获取焦点'
    },
    /**
     * el-input属性
     */

  },
  watch:{
    value:{
      handler(val){
        this.model = val;
      },
      immediate:true
    },
    model(val){
      this.$emit('input',val);
    }
  },
  data() {
    return {
        model:''
    };
  },
  methods: {
    blur(event){
      this.$emit('blur',event);
    },
    focus(event){
      this.$emit('focus',event);
    },
    change(event){
      this.$emit('change',event);
    },
    input(event){
      this.$emit('input',event);
    },
    clear(event){
      this.$emit('clear',event);
    }
  },
  mounted: function () {

  }
};
</script>
